<template>
	<div>
		<el-dialog :title="type=='add'?`添加${options.type}`:`修改${options.type}`" :visible.sync="dialogTableVisible"
			width='500px' center>
			<el-form :label-position="labelPosition" label-width="80px" ref="dialog" status-icon :model="options.data"
				center :rules="options.rules">
				<el-form-item :label="options.list[index]" :prop="key" v-for="(item,key,index) in options.data"
					:key="index">
					<el-input autocomplete="off" v-model="options.data[key]" :clearable=true
						:show-password="key=='password'"></el-input>
				</el-form-item>
				<el-form-item label="头像" v-if="options.upload">
					<el-upload class="upload-demo" ref="upload" action="http://101.201.70.102:8080/oss/upload"
						:limit="1" :on-exceed="handleExceed" :on-success="handleSuccess" :file-list="fileList">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submit('dialog')">确 定</el-button>
				<el-button type="primary" @click="resetForm('dialog')">重 置</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		Save,
		Update,
		Get
	} from '../../api/user'
	import {
		mixin
	} from "../../utils/mixins";

	export default {
		mixins: [mixin],
		props: {
			options: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				dialogTableVisible: false,
				labelPosition: 'right',
				type: "",
				updateId: '',
				password: '',
				fileList: [],
				dataList: {}
			}
		},
		created() {

		},
		methods: {
			// 显示dialog弹窗
			showDialog(type, data, id) {
				if (type == "update") {
					this.updateId = id
					this.options.data = this.$objCopy(this.options.data, data)
					console.log("----------------------------")
					console.log(this.options.data)
					if (this.options.type == "用户") {
						this.getPassWord(id)
					}
				} else {
					Object.keys(this.options.data).forEach(key => this.options.data[key] = '')
				}
				this.type = type
				this.dialogTableVisible = true
			},

			// 上传图片
			handleSuccess(response, file, fileList) {
				console.log(response)
				this.notify("上传成功！", "success")
				this.options.data.picture = response.data.src
				console.log(file)

			},
			handleExceed() {
				this.notify("只能上传一张图片！", "warning")
			},

			// 数据增改
			saveList(formData) {
				this.$emit("Save")
			},
			updateList(formData) {
				this.$emit("Update", this.updateId)
			},
			// 表单提交
			submit(formData) {
				if (this.$refs.upload) {
					this.$refs.upload.clearFiles();
				}

				const _this = this
				this.$refs[formData].validate((valid) => {
					if (!valid) {
						console.log(valid)
						return false
					} else {
						if (this.type == 'add') {
							this.saveList()
						} else {
							this.updateList()
						}
						this.dialogTableVisible = false
						Object.keys(this.options.data).forEach(key => this.options.data[key] = '')
					}
				});
			},

			//表单重置
			resetForm(formData) {
				this.$refs[formData].resetFields();
			},

			//获取用户密码
			getPassWord(id) {
				const _this=this
				console.log("获取密码======")
				Get(id).then(res => {
					this.$set(_this.options.data, 'password', res.user.password);
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>

</style>
